<template>
  <view class="pinkorder">
    <view class="navbar1">
      <view class="iconfont icon-xiangzuo"
            @tap='returns'></view>
      <text>参团订单</text>
    </view>
    <view style="height:96rpx"></view>
    <v-tabs class="tab"
            v-model="current"
            :tabs="tabs"
            @change="changeTab"></v-tabs>
    <block v-for="(item,index) in pinkList"
           :key="index">
      <view class="orderdetail"
            v-if="current == 0 || current ==item.status">
        <view class="list acea-row row-between-wrapper">
          <text>订单号: {{item.product.spu}}</text>
          <text class="cr"
                v-if="item.status == 1">已参团</text>
          <text class="cr"
                v-if="item.status == 2 && item.win == 1">恭喜中团</text>
				<text class="cr"
				      v-if="item.status == 2 && item.win == 0">未中团</text>
          <text class="cr"
                v-if="item.status == 3">拼团失败</text>
        </view>
        <view class='goodWrapper'>
          <view class='item acea-row row-between-wrapper'>
            <view class='pictrue'>
              <image :src='item.product.image'></image>
            </view>
            <view class='text'>
              <view class='acea-row row-between-wrapper'>
                <view class='name line1'>{{item.product.store_name}}</view>
                <view class='num'>{{item.product.pink_type}}人团</view>
              </view>
              <view class="acea-row row-between-wrapper">
                <text class='money font-color'>{{item.total_price}}元</text>
                <text class='money font-color'>{{(item.people-item.pink_people >0) ? '还差' +(item.people-item.pink_people) + '人' : '拼团成功'}}</text>
              </view>
            </view>
          </view>
          <view class="acea-row row-between-wrapper">
            <view class='initiator'>
              <image class="avatars"
                     :src="item.avatar" />
              <text>{{item.nickname}}</text>
            </view>
            <button class="btn"
                    @click="getDetail">订单详情</button>
          </view>
        </view>
      </view>
    </block>
    <view v-if="pinkList.length == 0">
      <emptyPage title="暂无订单~"></emptyPage>
    </view>

  </view>
</template>

<script>
import { getPinkjoingrouplist } from '@/api/order.js'
import emptyPage from '@/components/emptyPage.vue'
import stoptimer from '@/components/stopTimer/stopTimer.vue'
import Vtabs from '@/components/v-tabs/v-tabs.vue'
export default {
  data() {
    return {
      pinkList: [],
      index: 0,
      tabs: ['全部', '待拼团', '已完成', '拼团失败'],
      current: 0,
    }
  },
  components: {
    emptyPage,
    Vtabs,
    stoptimer,
  },
  created() {
    this.getorderlist()
  },
  methods: {
    returns() {
      uni.navigateBack()
    },
    callback() {},
    getorderlist() {
      getPinkjoingrouplist().then((res) => {
        console.log(res)
        this.pinkList = res.data.pinkList
      })
    },
    getDetail() {
      this.$util.Tips({ title: '开发中，敬请期待！' })
    },
    changeTab(index) {
      console.log(index);
      this.current = index
    },
  },
}
</script>

<style>
.pinkorder {
  padding-bottom: 30rpx;
}
.goodWrapper {
  background-color: #f7f7f7;
  padding-bottom: 10rpx;
  border-radius: 14rpx;
}
.orderdetail {
  background-color: #f7f7f7;
  margin-top: 30rpx;
  border-radius: 14rpx;
}
.tab {
  text-align: center;
}
.cr {
  color: red;
}
.list {
  padding: 20rpx 20rpx;
}
.initiator {
  margin-left: 30rpx;
}
.avatars {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 20rpx;
}
.btn {
  width: 220rpx;
  height: 60rpx;
  font-size: 32rpx;
  line-height: 60rpx;
  background-color: #ef271e;
  color: #fff;
  margin: 20rpx 20rpx 20rpx 0;
}
</style>